﻿@page "/datagrid/selection"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>  This sample demonstrates the selection feature in DataGrid, which allows you to select row or cell through simple mouse down or keyboard interaction.</p>
</SampleDescription>
<ActionDescription>
   <p>Selection provides an interactive support to highlight the row or cell that you select. Selection can be done through a simple mouse down or keyboard interaction. To enable selection, set <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting'>AllowSelection</a></code> property as true.</p>
   <p>DataGrid supports two types of selection which can be set using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type'>Type</a></code> property of the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html'>GridSelectionSettings</a></code> component. They are,</p>
    <ul>
        <li><strong>Single</strong> - Enabled by default. Allows the user to select single row/cell at a time.</li>
        <li><strong>Multiple</strong> - Allows the user to select more than one row/cell at a time.</li>
    </ul>
    <p>Also, three modes of selection are supported which can be set using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode'>Mode</a></code> property. They are,</p>
     <ul>
        <li><strong>Row</strong> - Enabled by default. Enables the row selection in DataGrid.</li>
         <li><strong>Cell</strong> - Enables the cell selection in DataGrid.</li>
         <li><strong>Both</strong> - Enables both the row and cell selection in DataGrid. Clicking any cell will select the both row and cell simultaneously.</li>
      </ul>
        <p>To perform the multi-selection, hold <strong>CTRL</strong> key and click the desired rows/cells. To select range of rows/cells, hold <strong>SHIFT</strong> key and click the rows/cells.</p>
        <p>While using the DataGrid in a touch environment, there is an option for multi-selection through single tap on the row and it will show a popup with the multi-selection symbol. Tap the icon to select all the records in a single tap.</p>
        <p>More information on the selection configuration can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/selection'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" AllowSelection="true" AllowPaging="true">
                <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
                <GridPageSettings PageCount="5"></GridPageSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" TextAlign="TextAlign.Right" Width="120" Format="C2"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

@*<div class="col-lg-3 property-section">
        <h4 style="margin-top:38px;">Properties</h4>

        <table id="property" style="width: 73%; height: 105px;">
            <tr>
                <td class="left-side" style="padding-right:15px;">Selection Type</td>
                <td>
                    <SfDropDownList ID="types" Index="0" PopupWidth="110px" DataSource="@types" Change="@onchange">
                        <DropDownListFieldSettings text="id" value="type"></DropDownListFieldSettings>
                    </SfDropDownList>
                </td>
            </tr>
            <tr>
                <td class="left-side" style="padding-right:15px;">Selection Mode</td>
                <td>
                    <SfDropDownList ID="mode" Index="0" PopupWidth="110px" DataSource="@modes" Change="@onmodechange">
                        <DropDownListFieldSettings text="id" value="mode"></DropDownListFieldSettings>
                    </SfDropDownList>
                </td>
            </tr>
        </table>
    </div>*@

@code{

    public List<OrdersDetails> GridData { get; set; }

    public class SelectionType
    {
        public string id { get; set; }

        public string type { get; set; }
    }

    private List<SelectionType> types = new List<SelectionType>()
{
        new SelectionType(){ id= "Multiple", type= "Multiple" },
        new SelectionType(){ id= "Single", type= "Single" },
    };

    public class Mode
    {
        public string id { get; set; }

        public string mode { get; set; }
    }

    private List<Mode> modes = new List<Mode>()
{
        new Mode(){ id= "Row", mode= "Row" },
        new Mode(){ id= "Cell", mode= "Cell" },
        new Mode(){ id= "Both", mode= "Both" },
    };

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
